<template>
  <div class="hello">
    一起学习axios
  </div>
</template>

<script>

  import axios from 'axios'
  import queryString from 'queryString'//node内置的模块，可以直接引用

  var HTTP = axios.create({
    baseURL:'http://easy-mock.com/mock/59cf334bc5c4302238f63f08',
    timeout: 1000,
    responseType:'json',//配置响应数据的格式
    headers:{
      'custome-header': 'miaov',
      'content-type':'application/x-www-form-urlencoded'//设置请求类型，让post方式支持get一样的查询字符串的格式
    },
    //中间件，对post、put、patch方式发送的数据进行一个转换，然后再return出去
    transformRequest:[function (data){

      return queryString.stringify(data);//把数据转换成查询字符串的格式

    }],
    //中间件，对响应的数据进行处理,处理完需要把数据return出去
    transformResponse:[function (data){

      console.log(data);

      data.age=11;//添加一条数据

      return data;
    }],
    //自定义服务器状态码的成功或失败的范围,并且return出去
    validateStatus:function (status){

      console.log(status);

      return status<=400;//小于400的时候请求成功
    }
  })

  export default {

    name: 'hello',

    created(){

      HTTP.post("test-post-mock",{
          name:'leo',
          age:21
        })
        .then((response)=>{
        console.log(response.data)
    })

    .catch((error) =>{
        console.log(error)
    })

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    font-size: 30px;
  }
</style>
